<template>
	<view class="container">
		<uni-nav-bar @clickRight="clickRight" @clickLeft="clickLeft"  fixed="true" left-icon="bars" right-icon="search" title="网易云音乐" background-color="#d44439" color="white"></uni-nav-bar>
		<scrollViews @change="change"></scrollViews>
		
		<GeDanContainer @jump="jump" :GeDan="GeDan" v-if=" name === '华语' ">
			<swiper autoplay="true" circular="true">
				<swiper-item v-for="(item,index) in swiperGeDan" :key="item.id" @click="jump(item.id)">
					<!--  #ifdef  MP-WEIXIN -->
					<image class="img" :src="item.coverImgUrl"></image>
					<!--  #endif -->
					<!--  #ifndef  MP-WEIXIN -->
					<img class="img" v-lazy="item.coverImgUrl">
					<!--  #endif -->
					<p>{{item.name}}</p>
				</swiper-item>
			</swiper>
		</GeDanContainer>
		
		<GeDanContainer @jump="jump" :GeDan="GeDan" v-else></GeDanContainer>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import scrollViews from '../../../components/scroll-views/scroll-views.vue'
	import GeDanContainer from '../../../components/GeDanContainer/GeDanContainer.vue'
	import {playlist} from '../../../api/gedan/gedan.js'
	export default {
		onLoad(){
			playlist({cat:'华语'}).then(res => {
				this.GeDan = res.playlists
				//console.log(this.GeDan)
				this.swiperGeDan.push(res.playlists[0])
				this.swiperGeDan.push(res.playlists[1])
				this.swiperGeDan.push(res.playlists[2])
			})
		},
		data() {
			return {
				GeDan:[],
				swiperGeDan:[],
				name:'华语'
			}
		},
		components: {
			uniNavBar,
			scrollViews,
			GeDanContainer
		},
		methods:{
			clickLeft(){
				uni.navigateTo({
					url:'../../ZuiJinBoFang/ZuiJinBoFang'
				})
			},
			clickRight(){
				uni.navigateTo({
					url:'../../SouSuo/SouSuo'
				})
			},
			jump(id){
				uni.navigateTo({
					url:'../../AllGeDan/AllGeDan?id=' + id + '&num=1'
				})
			},
			change(name){
				this.name = name
				playlist({cat:name}).then(res => {
					this.GeDan = res.playlists
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width: 750rpx;
		swiper{
			width: 40%;
			margin: auto;
			height: 350rpx;
			.img{
				width: 100%;
				height: 80%;
			}
			p{
				font-size: 24rpx;
			}
		}
	}
</style>
